<template>
  <view class="grid grid-cols-1 gap-2 items-stretch justify-center shadow p-4 py-12" style="">
    <view class="col-span-5 grid justify-center items-stretch" style="gap: 80rpx 12rpx">
      <view style="display: grid; justify-content: center">
        <text class="power-title">{{ device.name }}</text>
        <text class="power-location">{{ device.roomNumber }}</text>
      </view>
      <view class="items-center justify-center">
        <view style="display: grid; justify-content: center">
          <image
            style="width: 108px; height: 108px;"
            src="/static/icons/icon-light.png"
          ></image>
        </view>
      </view>
      <view @click="handleSwitchPower" style="display: grid; justify-content: center" class="items-center justify-center status-text">
          <image
            v-if="baseInfo.properties.light !== 0"
            style="width: 56px; height: 56px;"
            src="/static/icons/on.png"
            class="w-full"
          >
          </image>
          <image
            v-else
            style="width: 56px; height: 56px;"
            src="/static/icons/off.png"
          ></image>
        </view>
        <view style="display: grid; justify-content: center" class="items-center justify-center">
          <text :class="['status-text', 'status_' + baseInfo.properties.light]">
            {{ baseInfo.properties.light | statusText }}
          </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    device: {
      type: Object,
      default: {},
    },
  },
  data() {
      return {
          baseInfo: this.device
      }
  },
  filters: {
    statusText(status) {
      return status !== 0 ? '开启中': '已关闭'
    },
  },
  methods: {
      handleSwitchPower() {
      if (this.baseInfo.properties.light == 1) {
        this.baseInfo.properties.light = 0;
      } else {
        this.baseInfo.properties.light = 1;
      }
      const jsonObject = {
        action: 'control',
        deviceId: this.device.id,
        deviceProperty: 'on',
        value: String(this.baseInfo.properties.light),
      }
      this.$store.dispatch("device/control", {
          ...this.device,
          nodeId: this.device.node,
          jsonObject,
        });
    },
  }
}
</script>

<style lang="scss" scoped>
.power-title {
  font-size: 38rpx;
  font-family: PingFang SC;
  font-weight: 400;
  // color: rgba(23, 153, 249, 1);
  opacity: 1;
}
.power-text {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(40, 42, 51, 1);
  opacity: 1;
  margin-left: 6rpx;
}
.power-unit {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 33px;
  color: rgba(128, 134, 149, 1);
  opacity: 1;
  margin-left: 6rpx;
}

.power-location {
//   margin-left: 18rpx;
  color: #808695;
//   width: 129rpx;
//   height: 40rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 40px;
  justify-self: center;
}

.py-12 {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

.status-text {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 219, 144, 1);
  opacity: 1;
  margin-top: 12rpx;
}

.status_0 {
  color: #bdc7df;
}
</style>
